Drop Down Boxes: No Button

---

Browser Compatibility:    NS3+, IE4+

Now that you have seen the javascript drop box with the button, you may want to know how to make a drop box change pages without requiring the viewer to click a button. Instead, you want it to change pages as soon as a choice is selected.

Well, the code for this is actually shorter than the drop box with the button. All that is new here is that you will need to learn the onChange attribute. The onChange attribute is another way of calling javascript when something happens. It is coded in much the same way as onClick or onMouseover. The difference is that this attribute is used in form elements, select boxes. The onChange attribute will perform javascript statements when something inside your form element is changed. In this case we will be changing a select box. Here is a quick example of the onChange attribute. You can send someone a message when they choose something:

<FORM>
<SELECT name="sport" onChange="alert('I\'m glad YOU can make choices!')">
<OPTION SELECTED>--Choose a Sport--
<OPTION>Football
<OPTION>Basketball
</SELECT>
</FORM>

You can try it out below. It isn't very useful, but it works....

--Choose a Sport-- Football Basketball

Now, we can get to the useful application. You can use the onChange attribute to do the same thing that we did with the onClick in the button in the last section. In other words, the onChange attribute will now load the new url when someone makes a selection. A new sample drop box is below. Give it a try:

--Choose-- Page 1 My Cool Page

In the last section, we learned how to access the value of the select box and change the page the person is vieweing. If you haven't seen this yet, go back to the first drop box tutorial.

Other than removing the button and moving the window.location code to the onChange attribute in the Select tag, this is the same script:

<FORM name="guideform">
<SELECT name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> <OPTION SELECTED value="jdrop2.htm">--Choose--
<OPTION value="jex15.htm">Page 1
<OPTION value="jex16.htm">My Cool Page
</SELECT>
</FORM>

Notice that the default option selected just tells you to choose something. It won't lead anywhere unless someone tries to change back to it. I used the url of the page it was on for the value of it, so the browser will stay on the same page if it gets selected later. This isn't likely to happen though. I couldn't go back and change back to the default option from another option when I tried. The browsers just went back and loaded the page with the default selection already selected again.

Well, there is your drop box with no button. Go change the urls and have some fun with it!

Well, that does it for now, try out the next section on JavaScript Password Protection.

---